<script setup lang="ts">
import { thumbStyle } from "_s/common/quasarStyle";
import ThemeSwitch from "_c/ThemeSwitch/index.vue";
import i18n from "_c/i18n/index.vue";
import DrawerMenu from "_c/drawerMenu/index.vue";
// import Logout from "_c/logout/index.vue";
import UserAvator from "_c/userAvator/index.vue";
import { isMiniMenu, setMiniMenu } from "_s/hooks/useMenu";

// import { useUserStore } from "_s/stores/modules/user";

// const userStore = useUserStore();

// console.log(userStore.userInfo);
const route = useRoute();
const $q = useQuasar();

const toggleFullscreen = () => {
  void $q.fullscreen.toggle();
};
</script>

<template>
  <q-scroll-area
    style="height: 100vh"
    :thumb-style="thumbStyle"
  >
    <!-- :thumb-style="$const.ThumbStyle" -->
    <q-layout view="LHh LpR lff">
      <!-- hHh Lpr lff   lHh LpR lff-->
      <q-header
        bordered
        :class="[$q.dark.isActive ? 'text-white' : 'text-dark']"
      >
        <q-toolbar class="header-toolbar">
          <q-btn
            flat
            round
            size="sm"
            :icon="isMiniMenu ? 'format_indent_increase' : 'format_indent_decrease'"
            @click="setMiniMenu(!isMiniMenu)"
          />

          <!-- flat color="primary" size="sm" round icon="translate" -->
          <q-btn
            class="q-ml-sm"
            size="12px"
            flat
            round
            dense
            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
            @click="toggleFullscreen"
          >
            <q-tooltip>{{ $t($q.fullscreen.isActive ? "pub.exitFullscreen" : "pub.fullscreen") }}</q-tooltip>
          </q-btn>
          <q-space />

          <i18n />
          <ThemeSwitch class="q-mx-sm" />
          <!-- <Logout /> -->
          <UserAvator />
        </q-toolbar>
      </q-header>
      <DrawerMenu />
      <q-page-container>
        <router-view
          v-slot="{ Component }"
          class="q-pa-md"
        >
          <transition
            name="fade"
            mode="out-in"
            appear
          >
            <component
              :is="Component"
              :key="route.name"
            />
          </transition>
        </router-view>

        <!-- <router-view class="q-pa-md" /> -->
      </q-page-container>
    </q-layout>
  </q-scroll-area>
</template>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.q-header {
  background-color: rgba(0, 0, 0, 0);
}
</style>
